<template>
	<view class="content">
		<!-- <pyh-nv :config="config"></pyh-nv> -->
		<image :src="baseurl+'association/headBg.jpg'" class="bg"></image>
		<view class="fixedHeader">
			<u-navbar title=" " bgColor="transparent" autoBack='true'></u-navbar>
			<view class="headBox">
				<image :src="content.head" class="avatar"></image>
				<text class="name">{{content.name}}</text>
				<text class="num">社群编号：{{content.code || ''}}</text>
				<text class="desc">{{content.into}}</text>
				<view class="info">
					<view class="infoItem">
						<text class="infoTop">{{content.article_count}}</text>
						<text class="infoBottom">发帖</text>
					</view>
					<view class="infoItem">
						<text class="infoTop">{{content.activity_count}}</text>
						<text class="infoBottom">活动</text>
					</view>
					<view class="infoItem" @click="$navto.navto('/packageB/association_member/association_member',{id:id,admin:content.is_principal})">
						<text class="infoTop">{{content.community_user_count}}</text>
						<text class="infoBottom">成员></text>
					</view>
				</view>
				<view v-if="content.is_principal==0">
					<view class="join" v-if="content.community_status==0" @click.stop="join()">
						申请加入
					</view>
					<view class="exit" v-else @click.stop="exit()">
						退出
					</view>
				</view>
				<!-- <image :src="baseurl+'association/qrcode.png'" class="qrcode" @click.stop="join()"></image> -->
			</view>
			<view class="selectTop">
				<v-tabs v-model="current" :scroll="true" :tabs="tabs" fontSize="25rpx" @change="changeTab"
					color="#000000" activeColor="#000000" height="50rpx" lineHeight="5rpx" lineColor="#4E97AD"
					lineScale="0.4" bgColor="transparent" paddingItem="30rpx">
				</v-tabs>
			</view>
		</view>
		<scroll-view class="selectBox" scroll-y="true"
			:style="{marginTop: fixedHeaderHeight + 'px', height: contentHeight + 'px'}" @scrolltolower="getMore">
			<view class="listBox">
				<!-- 活动 -->
				<block v-for="(item,index) in total" :key="index">
					<!-- 有主办方的是活动 -->
					<view class="listBoxInner"
						:class="[index%2==0?'activityBg':'activityBg1', index%2!=0 ? 'darkText' : '']"
						v-if="item.sponsor&&item.is_putaway==1" @click="$navto.navto('/packageB/activity_info/activity_info',{id:item.id})">
						<view class="listItem">
							<view class="activityBox">
								<view class="topBox">
									<image :src="baseurl+'association/icon1.png'" class="itemIcon"></image>
									<image :src="baseurl+'association/din.png'" v-if="item.is_top==1" class="din">
									</image>
									<text class="activityTitle">{{item.name}}</text>
								</view>
								<image :src="item.cover" class="itemCover"></image>
								<text class="activityName" style="left: 0;">主办方：{{item.sponsor}}</text>
								<text
									class="activityTime">活动时间：{{$timestampToTime(item.start_time)}}至{{$timestampToTime(item.end_time)}}</text>
								<text class="activityaddress">活动地点：{{item.address}}</text>
								<text class="activityNum" v-if="item.status==0">活动状态：未开始</text>
								<text class="activityNum" v-else-if="item.status==1">活动状态：进行中</text>
								<text class="activityNum" v-else-if="item.status==2">活动状态：已结束</text>
							</view>
						</view>
					</view>
					<!-- 帖子 -->
					<view class="listBoxInner"
						:class="[index%2!=0?'activityBg1':'activityBg',  index%2!=0 ? 'darkText' : '']" v-if="!item.sponsor"
						@click="$navto.navto('/packageB/post_info/post_info',{id:item.id})">
						<view class="listItem">
							<view class="activityBox">
								<view class="topBox">
									<image :src="baseurl+'association/icon2.png'" class="itemIcon"></image>
									<text class="activityTitle">{{item.title}}</text>
								</view>
								<image :src="item.avatar" class="activityHead"></image>
								<view class="activityNameBox">
									<text class="activityName1">{{item.nickname}}</text>
									<image :src="ite.icon_url" v-for="(ite,ind) in item.medal" :key="ind"
										class="userBadge"></image>
								</view>
								<view class="viewBox">
									<image :src="baseurl+'association/icon9.png'" class="eye"></image>
									<text class="viewNum">阅读：{{item.read_num}}</text>
									<image :src="baseurl+'association/vote.png'" class="vote"></image>
									<text class="viewNum">点赞：{{item.like}}</text>
									<image :src="baseurl+'association/msg.png'" class="msg"></image>
									<text class="viewNum">回复：{{item.comment}}</text>
								</view>
								<text class="publishTime">发布时间：{{item.create_time}}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</scroll-view>
		<image :src="baseurl+'association/publish.png'" class="publish"
			@click="$navto.navto('/packageB/post/post',{id:content.id})" v-if="isArticle==1">
		</image>
		<!-- 入群规则 -->
		<view class="ruleBox" v-if="isRule">
			<view class="ruleBoxInner">
				<view class="ruleTopBox">
					<image :src="baseurl+'associationAdd/1.png'" class="step"></image>
					<image :src="baseurl+'associationAdd/3.png'" class="close" @click="isRule=!isRule"></image>
				</view>
				<text class="ruleTitle">《入群要求及协议》</text>
				<view class="ruleLine"></view>
				<view class="mpHtml">
					<mp-html :content="content.agreement" />
				</view>
				<view class="agreeBox" @click="agree">
					<image :src="baseurl+agreeUrl" class="agree"></image>
					<text class="agreeText1">我已阅读并同意</text>
					<text class="agreeText2">《入群要求及协议》</text>
				</view>
				<view class="next" @click="next">
					下一步
				</view>
			</view>
		</view>
		<!-- 申请入群 -->
		<view class="applyBox" v-if="isApply">
			<view class="applyBoxInner">
				<view class="applyTopBox">
					<image :src="baseurl+'associationAdd/2.png'" class="step"></image>
					<image :src="baseurl+'associationAdd/3.png'" class="close" @click="isApply=!isApply"></image>
				</view>
				<text class="applyLabel">
					您的姓名：
				</text>
				<input type="text" class="applyInput" placeholder="请填写您的姓名" v-model="name" />
				<text class="applyLabel">
					电话号码：
				</text>
				<input type="text" class="applyInput" placeholder="请填写您的电话号码" v-model="tel" maxlength="11" />
				<text class="applyLabel">联系主理人：</text>
				<text class="applyLabel" style="margin-top: 60rpx;"
					@click="$phone(content.principal_mobile)">{{content.principal_mobile || ''}}</text>
				<view class="apply" @click="apply()">
					申请入群
				</view>
			</view>
		</view>
		<!-- 申请结果 -->
		<view class="resultBox" v-if="isResult">
			<view class="resultInner">
				<view class="resultTopBox">
					<text class="resultTitle">审核结果</text>
					<image :src="baseurl+'associationAdd/3.png'" class="close" @click="isResult=!isResult"></image>
				</view>
				<view class="successBox" v-if="isFail">
					<image :src="baseurl+'associationAdd/6.png'" class="successIcon"></image>
					<text class="successTitle">申请失败</text>
					<text class="successDesc">很遗憾申请失败，再次申请试试！</text>
					<view class="successBtn" @click="again">
						再次申请
					</view>
				</view>
				<view class="successBox" v-if="isSuccess">
					<image :src="baseurl+'associationAdd/7.png'" class="successIcon"></image>
					<text class="successTitle">审核中</text>
					<text class="successDesc">申请审核中，请耐心等待</text>
					<view class="successBtn" @click="$navto.navto('/packageB/my_association_join/my_association_join')">
						查看审核
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				content: '',
				tabs: ['全部', '帖子', '活动'],
				current: 0,
				content: '',
				id: '',
				article: [],
				activity: [],
				total: [],
				isPoster: false,
				page: 1,
				isArticle: 0,
				fixedHeaderHeight: 0,
				windowHeight: 0,
				contentHeight: 0,
				page: 1,
				haveMore: true,
				isRule: false,
				isApply: false,
				isAgree: false,
				agreeUrl: 'associationAdd/4.png',
				name: '',
				tel: '',
				isResult: false,
				isSuccess: false,
				isFail: false,
				applyId: '' //要申请的社群id

			}
		},
		mounted() {
			this.calcHeaderHeight();
		},
		onLoad(options) {
			const systemInfo = uni.getSystemInfoSync();
			this.windowHeight = systemInfo.windowHeight;
			this.id = options.id;
			this.applyId = this.id;
			this.getData();
			// 获取文章列表
			this.$request.get(`Community/community_article_list?id=${this.id}`).then(res => {
				this.article = res.data.data;
				// 获取活动列表
				this.$request.get(`CommunityActivity/community_activity_list?id=${this.id}`).then(res => {
					this.activity = res.data.data;
					if (this.article.length > 0 && this.activity.length > 0) {
						this.total = this.mergeArrays(this.activity, this.article);
					}
					if (this.article.length == 0 && this.activity.length > 0) {
						this.total = this.activity;
					}
					if (this.article.length > 0 && this.activity.length == 0) {
						this.total = this.article;
					}
				})
			})
		},
		methods: {
			again() {
				this.isResult = false;
				this.isSuccess = false;
				this.isFail = false;
			},
			apply() {
				if (this.name == '') {
					return this.$toast({
						title: '请填写您的姓名'
					})
				}
				if (this.tel == '') {
					this.$u.toast('请填写您的电话')
					return;
				}
				if (!(/^1[3|4|5|6|8|7|9][0-9]\d{8}$/.test(this.tel))) {
					this.$u.toast('电话号码格式不正确')
					return;
				}
				this.$request.post(`CommunityUser/community_user`, {
					name: this.name,
					mobile: this.tel,
					community_id: this.applyId
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.isSuccess = true;
					} else {
						this.isFail = true;
					}
					this.isRule = false;
					this.isApply = false;
					this.isAgree = false;
					agreeUrl: 'associationAdd/4.png',
						this.isResult = true;
				})
			},
			agree() {
				if (this.isAgree == false) {
					this.isAgree = true;
					this.agreeUrl = 'associationAdd/5.png'
				} else {
					this.isAgree = false;
					this.agreeUrl = 'associationAdd/4.png'
				}
			},
			next() {
				console.log(this.isAgree)
				if (this.isAgree == false) {
					return this.$toast({
						title: '请阅读并同意入群要求及协议'
					})
				}
				this.isRule = false;
				this.isApply = true;
			},
			// 获取更多需要修改
			getMore() {
				console.log("加载更多123");
				this.page++;
				this.$request.get(`Community/community_article_list?id=${this.id}&page=${this.page}`).then(res => {
					this.article.push(...res.data.data);
					// 获取活动列表
					this.$request.get(`CommunityActivity/community_activity_list?id=${this.id}&page=${this.page}`)
						.then(res => {
							this.activity.push(...res.data.data);
							if (this.menuIndex == 0) {
								this.total = this.mergeArrays(this.activity, this.article);
							}
							if (this.menuIndex == 1) {
								this.total = this.article;
							}
							if (this.menuIndex == 2) {
								this.total = this.activity;
							}
						})
				})
			},
			calcHeaderHeight() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.fixedHeader').boundingClientRect(res => {
						if (res) {
							this.fixedHeaderHeight = res.height;
							this.contentHeight = this.windowHeight - res.height - 20;
						}
					}).exec();
				});
			},
			join() {
				this.isAgree = false;
				this.agreeUrl = 'associationAdd/4.png'
				this.isRule = !this.isRule;
			},
			changeTab(index) {
				this.page = 1;
				this.current = index;
				if (index == 0) {
					this.total = this.mergeArrays(this.activity, this.article);
				} else if (index == 1) {
					this.total = this.article;
				} else if (index == 2) {
					this.total = this.activity;
				}
			},
			getData() {
				this.$request.get(`community/communityDetail?id=${this.id}`).then(res => {
					this.content = res.data.data;
				})
			},
			exit() {
				this.$request.post(`communityUser/community_user`, {
					community_id: this.id
				}).then(res => {
					this.$u.toast(res.data.msg)
					this.getData();
				})
			},
			mergeArrays(array1, array2) {
				let mergedArray = [];
				let maxLength = Math.max(array1.length, array2.length);
				for (let i = 0; i < maxLength; i++) {
					if (i < array1.length) {
						mergedArray.push(array1[i]);
					}
					if (i < array2.length) {
						mergedArray.push(array2[i]);
					}
				}
				return mergedArray;
			}
		}
	}
</script>

<style lang="scss">
	.resultBox {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;

		.resultInner {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 1000rpx;
			max-height: 100%;
			background-color: #EDF6FA;
			border-radius: 50rpx 50rpx 0 0;

			.successBox {
				margin-top: 160rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.successBtn {
					width: 520rpx;
					height: 94rpx;
					background-color: #4E97AD;
					border-radius: 47rpx;
					margin-top: 160rpx;
					// margin-bottom: 130rpx;
					font-size: 28rpx;
					font-weight: 700;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.successDesc {
					font-size: 24rpx;
					font-weight: 500;
					color: #919191;
					margin-top: 35rpx;
				}

				.successTitle {
					font-size: 36rpx;
					font-weight: 700;
					margin-top: 85rpx;
				}

				.successIcon {
					width: 145rpx;
					height: 145rpx;
				}
			}

			.resultTopBox {
				position: relative;
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #c8c8c8;
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				box-sizing: border-box;
				margin-bottom: 75rpx;

				.resultTitle {
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-weight: 700;
				}

				.close {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					right: 40rpx;
				}
			}
		}
	}

	.applyBox {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;

		.applyBoxInner {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 1000rpx;
			max-height: 100%;
			background-color: #EDF6FA;
			border-radius: 50rpx 50rpx 0 0;

			.apply {
				width: 520rpx;
				height: 94rpx;
				background-color: #4E97AD;
				border-radius: 47rpx;
				margin-top: 95rpx;
				// margin-bottom: 130rpx;
				margin-left: 115rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.applyInput {
				width: 580rpx;
				height: 80rpx;
				border-radius: 10rpx;
				background-color: #fff;
				margin-left: 85rpx;
				font-size: 28rpx;
				padding-left: 50rpx;
				box-sizing: border-box;
				margin-top: 25rpx;
				margin-bottom: 40rpx;
			}

			.applyLabel {
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 85rpx;
				display: block;
			}

			.applyTopBox {
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #c8c8c8;
				padding: 40rpx;
				box-sizing: border-box;
				margin-bottom: 75rpx;

				.step {
					width: 550rpx;
					height: 40rpx;
				}

				.close {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.ruleBox {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;

		.ruleBoxInner {
			position: fixed;
			bottom: 0;
			width: 100%;
			max-height: 100%;
			margin-top: 360rpx;
			background-color: #fff;
			border-radius: 50rpx 50rpx 0 0;
			overflow: scroll;
			padding-bottom: 120rpx;

			.next {
				width: 520rpx;
				height: 94rpx;
				background-color: #4E97AD;
				border-radius: 47rpx;
				margin-top: 95rpx;
				// margin-bottom: 130rpx;
				margin-left: 115rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.agreeBox {
				width: 670rpx;
				display: flex;
				align-items: center;
				margin-left: 40rpx;

				.agreeText2 {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(78, 151, 173, 1);
				}

				.agreeText1 {
					font-size: 28rpx;
					font-weight: 500;
				}

				.agree {
					width: 35rpx;
					height: 35rpx;
					margin-right: 30rpx;
				}
			}

			.mpHtml {
				width: 670rpx;
				max-height: 500rpx;
				overflow-y: scroll;
				margin-top: 55rpx;
				margin-bottom: 55rpx;
				margin-left: 40rpx;
			}

			.ruleLine {
				width: 670rpx;
				height: 1rpx;
				background-color: #c8c8c8;
				margin: 0 auto;
			}

			.ruleTitle {
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				margin-top: 55rpx;
				margin-bottom: 55rpx;
				display: block;
			}

			.ruleTopBox {
				width: 100%;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #c8c8c8;
				padding: 40rpx;
				box-sizing: border-box;

				.step {
					width: 550rpx;
					height: 40rpx;
				}

				.close {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.u-navbar {
		background-color: transparent !important;

		&::after {
			display: none !important;
		}

		.u-navbar__border {
			display: none !important;
		}
	}

	.u-icon__icon {
		color: #fff !important;
	}

	.u-title {
		color: #fff !important;
	}

	.publish {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		bottom: 400rpx;
		right: 50rpx;
		z-index: 1;
	}

	.pyh-nv-box {
		position: absolute !important;
	}

	.activityBg {
		background-color: #5997AE;
	}

	.activityBg1 {
		background-color: #F0FCFF;
	}

	.darkText {
		text {
			color: #000 !important;
		}

		.black {
			color: #000 !important;
		}
	}

	.postBg {
		background-color: #F1FCFF;
	}

	.publishTime {
		position: absolute;
		max-width: 440rpx;
		font-size: 24rpx;
		font-weight: 500;
		left: 0;
		top: 200rpx;
		color: #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.viewBox {
		position: absolute;
		height: 20rpx;
		display: flex;
		align-items: center;
		top: 145rpx;

		.msg {
			width: 24rpx;
			height: 22rpx;
			margin-left: 45rpx;
		}

		.vote {
			width: 22rpx;
			height: 20rpx;
			margin-left: 45rpx;
		}

		.eye {
			width: 20rpx;
			height: 14rpx;
		}

		.viewNum {
			font-size: 20rpx;
			font-weight: 500;
			margin-left: 18rpx;
			color: #fff;
		}
	}

	.selectBox {
		position: relative;
		width: 100%;
		// margin-top: 800rpx;
		// height: 48vh;
		overflow-y: scroll;

		.black {
			color: #000 !important;
		}

		.listBox {
			width: 100%;
			// height: 45vh;

			// margin-left: 38rpx;
			.listBoxInner {
				width: 100%;
				padding-top: 50rpx;
				padding-bottom: 50rpx;
			}

			.listItem {
				width: 676rpx;
				height: 220rpx;
				position: relative;
				// margin-bottom: 50rpx;
				margin-left: 38rpx;

				.activityNameBox {
					position: absolute;
					max-width: 340rpx;
					font-size: 24rpx;
					font-weight: 500;
					top: 70rpx;
					left: 55rpx;
					color: #fff;
					display: flex;

					.activityName1 {
						max-width: 300rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.userBadge {
					width: 32rpx;
					height: 26rpx;
					margin-left: 20rpx;
					margin-top: 5rpx;
				}

				.line {
					position: absolute;
					bottom: 0;
					width: 100%;
					border-bottom: 1rpx solid #cbcbcb;
				}

				.activityBox {
					position: relative;
					width: 676rpx;

					.activityNum {
						position: absolute;
						max-width: 440rpx;
						font-size: 20rpx;
						font-weight: 500;
						left: 0;
						top: 200rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.activityaddress {
						position: absolute;
						max-width: 440rpx;
						font-size: 20rpx;
						font-weight: 500;
						left: 0;
						top: 163rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.activityTime {
						position: absolute;
						max-width: 440rpx;
						font-size: 20rpx;
						font-weight: 500;
						left: 0;
						top: 123rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.activityName {
						position: absolute;
						max-width: 380rpx;
						font-size: 24rpx;
						font-weight: 500;
						top: 72rpx;
						left: 55rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.itemCover {
						position: absolute;
						width: 236rpx;
						height: 165rpx;
						top: 66rpx;
						right: 0;
						border-radius: 15rpx;
					}

					.activityHead {
						position: absolute;
						width: 37rpx;
						height: 37rpx;
						top: 69rpx;
						border-radius: 50%;
					}

					.activityTitle {
						max-width: 510rpx;
						font-size: 28rpx;
						font-weight: 700;
						margin-left: 20rpx;
						color: #fff;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}



					.activityHead {
						position: absolute;
					}
				}

				.topBox {
					display: flex;
					align-items: center;
				}

				.din {
					width: 28rpx;
					height: 28rpx;
					margin-left: 20rpx;
				}

				.itemIcon {
					width: 60rpx;
					height: 30rpx;
				}
			}
		}
	}

	.selectTop {
		width: 710rpx;
		height: 24rpx;
		margin-top: 35rpx;
		margin-bottom: 50rpx;
		display: flex;
		justify-content: space-between;

		.selectTypeBox {
			width: 204rpx;
			height: 24rpx;
			display: flex;
			justify-content: space-between;

			.selectType {
				font-size: 20rpx;
				font-weight: 400;
				color: #8C8C8C;
			}
		}

		.selectLabel {
			width: 135rpx;
			height: 22rpx;
		}
	}

	.headBox {
		position: relative;
		width: 750rpx;
		height: 400rpx;
		// background: url('https://miantou.guguan.net/img/association/headBg.jpg');
		// background-size: 100% 100%;

		.qrcode {
			position: absolute;
			top: 50rpx;
			left: 680rpx;
			width: 34rpx;
			height: 34rpx;
		}

		.exit {
			position: absolute;
			width: 126rpx;
			height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 22rpx;
			font-weight: 500;
			background-color: #D95945;
			color: #fff;
			left: 588rpx;
			top: 250rpx;
		}

		.join {
			position: absolute;
			width: 126rpx;
			height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 22rpx;
			font-weight: 500;
			background-color: #4E97AD;
			color: #fff;
			left: 588rpx;
			top: 275rpx;
		}

		.info {
			position: absolute;
			font-size: 24rpx;
			font-weight: 500;
			top: 275rpx;
			left: 0rpx;
			color: #fff;
			display: flex;

			.infoItem {
				width: 120rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.infoTop {
					font-size: 36rpx;
					font-weight: 700;
					color: #fff;
				}

				.infoBottom {
					font-size: 20rpx;
					font-weight: 500;
					color: #fff;
				}
			}
		}

		.desc {
			position: absolute;
			font-size: 24rpx;
			font-weight: 500;
			top: 160rpx;
			left: 40rpx;
			color: #fff;
			width: 700rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: normal;
		}

		.num {
			position: absolute;
			top: 110rpx;
			left: 200rpx;
			color: #A7CDD9;
			font-size: 22rpx;
			font-weight: 500;
			letter-spacing: 2rpx;
		}

		.name {
			position: absolute;
			font-size: 32rpx;
			font-weight: 700;
			top: 50rpx;
			left: 200rpx;
			color: #fff;
		}

		.avatar {
			position: absolute;
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
			top: 20rpx;
			left: 40rpx;
		}
	}

	.fixedHeader {
		position: fixed;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 577rpx;
	}

	.content {
		width: 100%;
		height: 100%;
		background-color: #fff;
		overflow: hidden;
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>